<template>
    <div class="row" :style="rowStyle" :class="rowClass">
        <slot></slot>
    </div>
</template>


<script>
    export  default{
        name: 'GuluRow',
        props:{
            gutter:{
                type: [Number,String]
            },
            align:{
                type: String,
                validator(value){
                    return ['left','right','center'].indexOf(value) >= 0
                }
            }
        },
        computed:{
            rowStyle(){
                let {gutter} = this
                return {marginLeft: -gutter/2+'px', marginRight: -gutter/2 +'px'}
            },
            rowClass(){
                let {align} = this
                return [align && `align-${align}`]
            }
        },
        mounted() {
            this.$children.forEach((vm) =>{
                vm.gutter = this.gutter
            })
        }
    }
</script>

<style lang="scss" scoped>
    .row{
            display:flex;
        flex-wrap: wrap;

        &.align-left{
            justify-content: flex-start;
        }

        &.align-right{
            justify-content: flex-end;
        }

        &.align-center{
            justify-content: center;
        }
    }
</style>